// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.

@use 'utils/mixins';

$app-bar-icon-size: 24px;
$app-bar-width: 44px;

.app-bar {
    // Do not show App Bar if on mobile
    @media (max-width: 768px) {
        display: none;
    }

    position: relative;
    display: flex;
    min-height: 0;
    flex-flow: column;

    &__top {
        position: relative;
        display: flex;
        width: $app-bar-width;
        flex: 1;
        flex-flow: column;
        padding-top: 15px;
        -ms-overflow-style: none;
        overflow-x: hidden;
        overflow-y: scroll;
        scrollbar-width: none;
        text-align: center;

        .app-bar__icon {
            position: relative;
            // Render App Bar icons on top of the RHS background div
            //(see `@media screen and (min-width: 769px) > #sidebar-right` in sass/layout/_sidebar-right.scss)
            z-index: 21;
            width: 100%;
            border-left: none;
            margin-bottom: 16px;
            cursor: pointer;

            &--active {
                &::before {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 3px;
                    height: $app-bar-icon-size;
                    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
                    background-color: var(--sidebar-text-active-border);
                    content: '';
                }

                .app-bar__icon-inner,
                span:not(.pulsating_dot) {
                    // if we want to show a tourtip/pulsating dot in any of the app bar icons, these styles must be ommitted when span.pulsating_dot
                    box-shadow: 0 0 0 2px var(--sidebar-text-active-border);

                    &:hover {
                        box-shadow: 0 0 0 2px rgba(var(--sidebar-text-active-border-rgb), 0.92) !important;
                    }
                }
            }

            .app-bar__icon-inner,
            span:not(.pulsating_dot) {
                display: block;
                overflow: hidden;
                width: $app-bar-icon-size;
                height: $app-bar-icon-size;
                border-radius: var(--radius-full);
                margin: 0 auto;
                line-height: 1;

                &:hover {
                    box-shadow: 0 0 0 2px rgba(var(--sidebar-text-rgb), 0.16);
                }

                img {
                    width: $app-bar-icon-size;
                    height: $app-bar-icon-size;
                    border-radius: var(--radius-full);
                }
            }

            span:not(.pulsating_dot) {
                padding: 2px;
                background-color: white;
                fill: var(--button-bg);
                font-size: 14px;
                line-height: 20px;
                vertical-align: middle;

                &.CompassIcon,
                &.icon-brand-zoom {
                    font-size: 20px;

                    &::before {
                        margin: 0 0 0 0.5px;
                    }
                }
            }

            .app-bar__old-icon {
                color: rgba(var(--sidebar-text-rgb), 0.64);

                &:hover,
                &--active {
                    color: rgba(var(--sidebar-text-rgb), 0.8);
                }
            }

            .app-bar__icon-inner--centered {
                display: grid;
                place-items: center;
            }
        }

        .app-bar__divider {
            width: 28px;
            border-top: 1px solid rgba(var(--sidebar-text-rgb), 0.16);
            margin-top: 0;
            margin-bottom: 19px;
        }

        .app-bar__icon.channel-header__icon--active {
            background: rgba(var(--button-bg-rgb), 0.08);
            color: var(--button-bg);
            fill: var(--button-bg);
        }
    }

    &__bottom {
        position: relative;
        display: flex;
        flex-flow: column;
        align-items: center;
        padding-top: 24px;
        padding-bottom: 36px;

        .app_bar__marketplace_button {
            @include mixins.icon-button;
            @include mixins.icon-button-small-compact;

            color: rgba(var(--sidebar-text-rgb), 0.64);

            &:hover {
                background-color: rgba(var(--sidebar-text-rgb), 0.08);
                color: rgba(var(--sidebar-text-rgb), 0.72);
            }
        }
    }
}

// This style is defined outside the .app-bar block above because it doesn't seem to work when defined there
.app-bar__top::-webkit-scrollbar {
    display: none;
}
